<div class="clr-row clr-align-items-center clr-justify-content-between">
  <div class="clr-col-10">
    <app-breadcrumb [path]="title">
    </app-breadcrumb>
  </div>
  <div class="clr-col-2">
    <div class="action-buttons">
      <app-button-group [view]="buttonGroup"></app-button-group>
    </div>
  </div>
</div>
<clr-tabs *ngIf="tabs.length > 0">
  <clr-tab *ngFor="let tab of tabs; trackBy: identifyTab">
    <div clrTabLink class="tab-button">
      <button clrTabLink class="tab-button" (click)="clickTab(tab.accessor)">
        {{ tab.name }}
      </button>
      <clr-icon
        shape="times"
        *ngIf="closable"
        (click)="closeTab(tab.accessor)"
      ></clr-icon>
    </div>
    <ng-template [clrIfActive]="activeTab === tab.accessor">
      <clr-tab-content>
        <app-content-switcher [view]="tab.view"></app-content-switcher>
      </clr-tab-content>
    </ng-template>
  </clr-tab>
</clr-tabs>
